<template>
<a-layout-header class="header" :class="cc()" :style="{'top':isMobile?'0px':(-scroll)+'px'}">
    <div class="head dfj" :style="{'height':isMobile?'45px':(-scroll+60)+'px'}">
        <div class="max-width dfjb dfj container" :style="{'position':'unset','width':locale=='us'?'100%':'1280px'}" :class="{'dfja':isMobile }">
            <div @click="fnRoute" class="logo" :class="{'text-align-l':isMobile}">
                <!-- <img src="~/static/image/logo.png" alt="" class="loginimg"> -->
                <div class="logintext">Onlogy</div>
            </div>
            <div class="mian_nav" v-if="!isMobile">
                <div class="nav">
                    <ul class="top-nav flex">
                        <li>
                            <div class="top-nav-item"><a href="./">{{$t('header.nav')[0]}}</a></div>
                        </li>
                        <li class="industry">
                            <div class="top-nav-item"><a href="./publisher">{{$t('header.nav')[1]}}</a></div>
                            <!-- <div class="top-nav-sub" >
                                <ul :class="{'sub-nav':true,'sub-nav2':locale=='us'}" >
                                    <li><a href="/photovoltaic.html">{{$t('header.nav_sub1')[0]}}</a></li>
                                    <li><a href="/agricultural.html">{{$t('header.nav_sub1')[1]}}</a></li>
                                </ul>
                            </div> -->
                        </li>
                        <li class="product">
                            <div class="top-nav-item"><a href="./meeting">{{$t('header.nav')[2]}}</a></div>
                            <!-- <div class="top-nav-sub" >
                                <ul  :class="{'sub-nav':true,'sub-nav2':locale=='us'}" >
                                    <li><a href="">{{$t('header.nav_sub2')[0]}}</a></li>
                                    <li><a href="/battery.html">{{$t('header.nav_sub2')[1]}}</a></li>
                                    <li><a href="/component.html">{{$t('header.nav_sub2')[2]}}</a></li>
                                    <li><a href="/terminal.html">{{$t('header.nav_sub2')[3]}}</a></li>
                                    <li><a href="/feed.html">{{$t('header.nav_sub2')[4]}}</a></li>
                                    <li><a href="/farming.html">{{$t('header.nav_sub2')[5]}}</a></li>
                                    <li><a href="/food.html">{{$t('header.nav_sub2')[6]}}</a></li>
                                </ul>
                            </div> -->
                        </li>
                        <li class="investors">
                            <div :class="{'top-nav-item':true,'top-nav-item2':locale=='us'}"><a href="./about">{{$t('header.nav')[3]}}</a></div>
                        </li>
                        <li class="jobs">
                            <div class="top-nav-item"><a href="./publisherapply">{{$t('header.nav')[4]}}</a></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div v-if="!isMobile" class="dfj">
                <div class="login">
                    <span class="lobtn" @click="handlelogout" v-if="getterUserInfo.email">{{getterUserInfo.email}} {{$t('btns.a')[1]}}</span>
                    <span class="lobtn" @click="handlelogin" v-if="!getterUserInfo.email">{{$t('btns.a')[0]}}</span>
                    <span class="lobtn" @click="handleSingin" v-if="!getterUserInfo.email">{{$t('btns.a')[10]}}</span>
                </div>
                <div class="language" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
                    <div href="javascript:;" class="language-now flex flex-items-center">
                        <a-icon type="global" class="global" />
                        <span style="padding-left:8px">{{$t('index.language')}}</span>
                        <a-icon type="down" class="global" />
                    </div>
                    <div class="language-all" v-show="showlanguage">
                        <div class="row">
                            <div class="language-list row flex">
                                <div class="row" v-for="lgitem in languageList" :key="lgitem.value" @click="onSetLang(lgitem)">
                                    <a>{{lgitem.label}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a-button v-else type="primary" @click="showDrawer" size="large">
                <a-icon type="menu-fold" />
            </a-button>
        </div>
    </div>
    <div class="mbile">
        <a-drawer :title="`${locale=='us'?'Menu':'菜单栏'}`" placement="right" :closable="false" @close="onClose" :headerStyle="{fontSize:'24px'}" :bodyStyle="{padding:0}" :visible="visible">
            <a-menu mode="inline" @click="mhandleClick">
                <a-menu-item>
                    <nuxt-link :to="{path:'./'}">{{$t('header.nav')[0]}}</nuxt-link>
                </a-menu-item>
                <a-menu-item >
                    <nuxt-link :to="{path:'./publisher'}">
                        {{$t('header.nav')[1]}}
                    </nuxt-link>
                </a-menu-item>
                <a-menu-item >
                    <nuxt-link :to="{path:'./meeting'}">
                        {{$t('header.nav')[2]}}
                    </nuxt-link>
                </a-menu-item>
                <a-menu-item >
                    <nuxt-link :to="{path:'./about'}">
                        {{$t('header.nav')[3]}}
                    </nuxt-link>
                </a-menu-item>
                <a-menu-item >
                    <nuxt-link :to="{path:'./publisherapply'}">
                        {{$t('header.nav')[4]}}
                    </nuxt-link>
                </a-menu-item>
            </a-menu>
            <div @click="onSetLang({value:locale == 'us'?'ch':'us'})" v-if="isMobile" class="mst-margin-l-20 mst-padded-20"> <a-icon type="global" class="global" />&nbsp; &nbsp;{{locale == 'us'?'Switch Chinese':'Switch to English'}}</div>
        </a-drawer>
    </div>
</a-layout-header>
</template>

<script>
import dataJson from "~/static/data";
import {
    getUserInfoApi
} from "~/assets/js/api";
import Storage from "good-storage";
import {
    mapGetters,
    mapMutations
} from "vuex";

export default {
    props: {
        datas: {
            type: Object,
            default: () => {
                return {
                    datas: {

                    }
                };
            }
        },
        scroll: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            visible: false,
            current: ["/"],
            openKeys: [''],
            list: [],
            userinfo: {},
            showlanguage:false,
            languageList: [{
                    label: '简体中文',
                    value: 'ch'
                }, {
                    label: 'English',
                    value: 'us'
                }
                // {
                //     label: 'Español',
                //     value: 'es'
                // }, {
                //     label: 'Français',
                //     value: 'c1h'
                // },
                // {
                //     label: 'Português',
                //     value: 'ch'
                // }, {
                //     label: '日本語',
                //     value: 'c2h'
                // }
            ],
            isMobile: false,
            onlyOneChild: {}
        };
    },
    computed: {
        ...mapGetters(["route", 'locale', 'getterToken', "getterUserInfo"]),
        _lang(ch, us) {
            return (ch, us) => {
                return this.locale == 'us' ? us : ch
            }
        }
    },
    created() {
       if (typeof window !== 'undefined') {
        //使用这个函数
        if (window.location.href.includes('/us/')) {
            let lang='us'
            Storage.set('lang', lang)
            this.setLang(lang)
            this.$i18n.locale = lang;
            return
        }
        if (window.location.href.includes('/ch/')) {
            let lang='ch'
            Storage.set('lang', lang)
            this.setLang(lang)
            this.$i18n.locale = lang;
            return
        }

        const regex = /\/saas(\/|$)/;  //检查字符串是否以/saas或/saas/结尾
        if(regex.test(window.location.href)){
           let lang='ch'
            Storage.set('lang', lang)
            this.setLang(lang)
            this.$i18n.locale = lang;
            return
        }
      }

    },
    mounted() {
        this.fetchList();
        this.isMobile = this.storage.mb()
        this.getUserInfo()

    },
    methods: {
        async fetchList() {
            // let res = await api.category.index();
            let res = dataJson.menu

        },
        getUserInfo() {
            console.log(Storage.get('TOKEN'), 'TOKENTOKENTOKENTOKEN')
            if (Storage.get('TOKEN')) {
                this.$store.dispatch('userInfo', {}).finally((data) => {
                    console.log(data, 'data')
                    console.log(this.getterUserInfo, 'getterUserInfogetterUserInfo')
                })
            }
        },
        getSearchString(key, Url) {
            var str = Url || '';

            str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号）
            // 以&分隔字符串，获得类似name=xiaoli这样的元素数组
            var arr = str.split("&");
            var obj = new Object();
            // 将每一个数组元素以=分隔并赋给obj对象
            for (var i = 0; i < arr.length; i++) {
                var tmp_arr = arr[i].split("=");
                if (i == 0) {
                    obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1] + '=' + tmp_arr[2]);
                } else {
                    obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
                }
            }
            return obj[key] || '';
        },
        handleClick() {
            this.setKey(0);
        },
        mhandleClick() {
            this.setKey(0);
            this.visible = false;
        },
        showDrawer() {
            this.visible = true;
        },
        onClose() {
            this.visible = false;
        },
        fnRoute() {
            this.$router.push({
                path: "/"
            });
            //window.location.href=''
            // this.current = ["/"];
        },
        handlelogin() {
            //this.$store.dispatch('Login',{}).then(())
            this.$router.push({
                path: "/login"
            });
        },
        handleSingin() {
            this.$router.push({
                path: "/registered"
            });
        },
        handlelogout() {
            this.$store.dispatch('LogOut', {}).then(() => {
                this.$message.info(this.$t('index.infotel[4]'));
                //'登录成功!'
                this.$router.push({
                    path: "/"
                });
            })
        },
        handleMouseOver(event) {
            // 鼠标悬停时的处理逻辑
            this.showlanguage = true
        },
        handleMouseOut(event) {
            // 鼠标移出时的处理逻辑
          this.showlanguage = false
        },
        onSetLang(item) {
            let lang = item.value
            //let lang = 'us' == this.locale ? 'ch' : 'us'

            Storage.set('lang', lang)
            this.setLang(lang)
            this.$i18n.locale = lang;
            this.lang=lang;
            this.visible=false;
            // location.reload()
            if(lang==='ch'){
              var currentUrl = window.location.href;
              if (currentUrl.includes('/us/')) {
                var newUrl = currentUrl.replace('/us/', '/ch/');
                window.location.href = newUrl; // 重定向到新的URL
              }else{
                 window.location.href= window.location.href
              }
            }
            if(lang==='us'){
              var currentUrl = window.location.href;
              if (currentUrl.includes('/ch/')) {
                var newUrl = currentUrl.replace('/ch/', '/us/');
                window.location.href = newUrl; // 重定向到新的URL
              }else{
                 window.location.href= window.location.href
              }
            }

        },
        cc() {
            return ` ${this.isMobile?'ismobile':this.$store.state.size}`
        },
        ...mapMutations({
            newRoute: "NEW_Route",
            setKey: "SET_KEY",
            setLang: "SET_LANG",
            setMenu: "SET_MENU",
            setMenuImmi: "SET_IMMIGRATION",
            setMenuOversea: "SET_OVER_SEA",
            setIndexQuick: "SET_INDEX_QUICK"
        })
    },
    watch: {
        // route(value) {
        //   this.fnCurrent(value);
        // },
        // $route(to, from) {
        //   this.newRoute(to.path);
        // }
    }
};
</script>

<style lang="less" scoped>
.container {
    margin: 0 auto;

    position: relative;
}

.header {
    position: fixed;
    width: 100%;
    padding: 0;
    z-index: 200;
    height: initial;
    background: none;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.16);
    background-color: #007CBB;

    .lobtn {
        cursor: pointer;
        font-size: 16px;
        color: #fff;
        display: inline-block;
        height: 100%;
        white-space: nowrap;
        padding: 0 6px;
    }

    .head {
        transition: all ease 0.5s;
        background: #007CBB;
        color: #fff;

        .mian_nav {
            display: flex;
            align-items: center;
            flex-grow: 1;
            max-width: 910px;

            //justify-content: space-around;
            .login {
                align-self: flex-end;
                cursor: pointer;
                display: flex;
                flex-wrap: nowrap;
            }
        }

        .loginimg {
            width: 150px;
            height: 35px;
            cursor: pointer;
        }

        .logintext {
            font-size: 28px;
            height: 100%;
            width: 150px;
            line-height: 100%;
            cursor: pointer;
        }

        .ant-menu-item {
            &.contact {
                font-size: 13px;

                a {
                    display: inline-block;
                    width: 120px;
                    background: #001e4f;
                    padding: 7px 0;
                    border-radius: 10px;
                    color: #fff;
                }
            }

            a {
                font-size: 18px;
            }
        }

        .ant-dropdown-link {
            color: rgba(0, 0, 0, 0.65);
            font-size: 18px;
        }

        .b {
            height: 15px;
        }

        .logo {
            img {
                transition: all ease 0.5s;
                width: initial;
            }
        }

        .global {
            font-size: 16px
        }
    }

    .ant-btn-primary {
        background-color: #2a5aa9;
    }

    .language {
        display: flex;
        height: 100% !important;
        border: 1px solid transparent;
        border-radius: 4px;
        transition: .4s;
        position: relative;
        cursor: pointer;
        align-items: center;
        flex-grow: 1;
    }

    .language .language-now {
        padding: 10px 16px;
        line-height: 16px !important;
        height: 100%;
         flex-grow: 1;
    }

    .language i.icon-language {
        margin-right: 6px;
    }

    .language i.icon-to-bottom {
        margin-left: 6px;
    }

    .language:hover {
        //border: 1px solid #BBB;
    }

    .language:hover .language-all {
        display: block;
    }

    .language-all:hover {
        display: block;
    }

    .language-all {
        //display: none;
        position: absolute;
        z-index: 99;
        top: 6px;
        min-width: 100%;
        margin: 30px auto 0px;
        padding: 10px 10px;
        -webkit-transition: all .25s linear;
        -o-transition: all .25s linear;
        transition: all .25s linear;
        background-color: #FFF;
        box-shadow: 0px 1px 3px 0px #2b2b2b;
        right: 0;
    }

    .language-all ul,
    .language-all li {
        padding: 0;
        margin: auto;
        list-style: none;
    }

    .language-all ul {
        margin: 0 0 0 auto;
        width: 220px;
        position: relative;
    }

    .language-all ul::after {
        height: 0;
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        font-size: 0;
        overflow: hidden;
    }

    .language-all li {
        width: 110px;
        margin: 0 0 0 auto;
        text-align: left;
    }

    .language-all .row-info-t {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    .language-list {
        line-height: 40px;
        display: flex;
        flex-flow: column;
    }

    .language-list .row {
        text-align: center;
        border-top: 1px solid #F5F5F5;
        word-break: keep-all;
    }

    .language-list .row:first-child {
        border-top: none;
    }
}

.ant-menu-inline {
    border: 0
}

.menu {
    background: none;
    color: #000;
    border: none;
}

.ant-menu-horizontal {
    border-bottom: none;
    font-size: 15px;
    line-height: initial;
}

.ant-menu-horizontal>.ant-menu-submenu-open {
    font-size: 15px;
}

.ant-menu-horizontal>.ant-menu-item:hover,
.ant-menu-horizontal>.ant-menu-submenu:hover,
.ant-menu-horizontal>.ant-menu-item-active,
.ant-menu-horizontal>.ant-menu-submenu-active,
.ant-menu-horizontal>.ant-menu-item-open,
.ant-menu-horizontal>.ant-menu-submenu-open,
.ant-menu-horizontal>.ant-menu-item-selected,
.ant-menu-horizontal>.ant-menu-submenu-selected {
    border-bottom-color: #fff;
}

#header {
    position: relative;
    background: #FFF;
    z-index: 9999;
    border-bottom: 1px solid #d8d7d7;
    transition: all .3s ease-in-out;
    width: 100%;
}

#header.top-fixed.hide-top-nav {
    position: fixed;
    top: -86px;
}

#header.top-fixed {
    position: fixed;
    top: 0;
    z-index: 9999999;
}

.top {
    height: 85px;
    line-height: 85px;
    background-color: #FFF;
}

.flex {
    display: flex;
}

.logo {
    width: 134px;

}

.logo img {
    width: 100%;
}

.top-tools {
    margin-right: 0;
    margin-left: auto;
}

.nav ul {
    width: 100%;
}

.nav ul,
.nav li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-nav>li {
    text-align: center;
}

.top-nav>li .top-nav-item {
    position: relative;
    height: 100%;
    padding: 0 18px;
    font-size: 16px;
    white-space: nowrap;
}

.top-nav>li .top-nav-item::after {
    content: "/";
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 12px;
    color: #DEDEDE;
    display: block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
}

.top-nav>li:last-child>.top-nav-item::after {
    display: none;
}

.top-nav>li>.top-nav-item>a {
    display: inline-block;
    // line-height: 85px;
    padding: 0 10px
}

.top-nav>li>.top-nav-item>a {
    position: relative;
}

.top-nav-item {
    a {
        color: #fff;
        font-size: 16px;
    }
}

.top-nav>li>.top-nav-item>a::after {
    content: "";
    height: 4px;
    width: calc(100% - 20px);
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0px;
    right: 0;
    bottom: 0px;
    margin: auto;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
}

.top-nav>li:hover>.top-nav-item>a::after {
    opacity: 1;
    visibility: visible;
}

.top-nav .top-nav-sub {
    display: none;
    position: absolute;
    z-index: 99;
    left: 0;
    width: 100%;
    margin: 0px 0 0 0;
    padding: 40px 17px;
    -webkit-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
    background-color: #FFF;
    box-shadow: 0px 3px 3px 0px #2b2b2b40;
    border-top: 1px solid #d8d7d7
}

.top-nav>li:hover .top-nav-sub {
    display: block;
    visibility: visible;
}

.top-nav .sub-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    display: flex;
    text-align: left;
    margin: auto;
}

.top-nav .sub-nav li {
    width: 33.3333%;
    text-align: left;
    line-height: 50px;
    position: relative;
    z-index: 9;
    font-size: 16px;
    min-height: 50px;
}

.sub-nav2 li {
    width: 50% !important;
    line-height: 20px !important;
}

.sub-nav2 {
    width: 800px !important;
}

.top-nav .industry .top-nav-sub ul {
    width: 400px;
    padding-right: 460px;
    box-sizing: content-box;
}

.sub-nav3 {
    width: 460px !important;
    padding-left: 300px !important;
    box-sizing: content-box;
}

.sub-nav3 li {
    width: 50% !important;
    line-height: 20px !important;
}

.sub-nav4 {
    width: 430px !important;
    padding-left: 700px !important;
    box-sizing: content-box;
}

.sub-nav4 li {
    width: 50% !important;
    line-height: 20px !important;
}

.top-nav .product .top-nav-sub ul {
    width: 600px;
    padding-right: 200px;
    box-sizing: content-box;
}

.top-nav .product .top-nav-sub li {
    width: 30%
}

.top-nav .product .top-nav-sub li:nth-child(1) {
    width: 40%
}

.top-nav .product .top-nav-sub li:nth-child(4) {
    width: 30%
}

.top-nav .product .top-nav-sub li:nth-child(5) {
    width: 25%
}

.top-nav .product .top-nav-sub li:nth-child(6) {
    width: 25%
}

.top-nav .product .top-nav-sub li:nth-child(7) {
    width: 10%;
}

.top-nav .investors .top-nav-sub ul {
    width: 260px;
    padding-right: 50px;
    box-sizing: content-box;
}

.top-nav .investors .top-nav-sub li {
    margin-left: 0;
    margin-right: 0;
    width: 50%;
}

.top-nav .jobs .top-nav-sub ul {
    width: 260px;
    padding-left: 200px;
    box-sizing: content-box;
}

.top-nav .jobs .top-nav-sub li {
    width: 50%;
}

.top-nav .about .top-nav-sub ul {
    width: 420px;
    padding-left: 300px;
    box-sizing: content-box;
}

.nav {
    margin-left: 50px;
}

/* 当屏幕宽度小于1850像素时 */
@media screen and (max-width: 1849px) {
    .nav {
        margin-left: 10px;
    }
}

.nav ul {
    width: 100%;
}

.nav ul,
.nav li {
    list-style: none;
    padding: 0;
    margin: 0;
}
</style>
